
import { reactive, onMounted, onBeforeUnmount, watchEffect, computed ,watch} from "vue";
// 暴露一个函数，里面有data、methods、created、watch
export default function() {
  //实现鼠标“打点”相关的数据，data
  let point = reactive({
    x: 0,
    y: 0,
  });
// 计算属性，有返回值，需要变量接住
  let sum = computed(()=>{
    return point.x+point.y
  })

  //实现鼠标“打点”相关的方法，methods
  function savePoint(event) {
    point.x = event.pageX;
    point.y = event.pageY;
    console.log(event.pageX, event.pageY);
  }

// 监视器，不用返回值
    watch(sum,()=>{
        console.log('鼠标点的和变化了',sum)
    },{immediate:false})


  //实现鼠标“打点”相关的生命周期函数
  onMounted(() => {
    window.addEventListener("click", savePoint);
  });

  onBeforeUnmount(() => {
    window.removeEventListener("click", savePoint);
  });
// 返回data
  return point
}
